<div class="figure-wrapper">
  <figure
    aria-label="Two filled fields next to each other. The first has a label that says comments and supporting text under the field that says Provide comments for the issue. The second field has a label of Name with an asterisk and supporting text under the field that has an asterisk followed by the word required"
    style="padding-block: 16px; gap: 16px"
  >
    <md-filled-text-field
      label="Comments"
      supporting-text="Provide comments for the issue"
    ></md-filled-text-field>
    <md-filled-text-field
      label="Name"
      required
      supporting-text="*required"
      error-text="Please fill out this field"
    ></md-filled-text-field>
  </figure>
</div>
